<template>
    <div>
        <ul>
            <li v-for="item in list" :key="item.id" @click="change">
                {{ item.type }}
                <ul>
                    <li v-for="tipitem in item.tip" :key="tipitem.id" v-show="status">
                        {{ tipitem.name }}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    type: '首页'
                },
                {
                    id: 2,
                    type: '语言工具',
                    tip: [
                        {
                            id: 1,
                            name: '一句诗词'
                        },
                        {
                            id: 2,
                            name: '励志句子'
                        },
                        {
                            id: 3,
                            name: '毒鸡汤'
                        }
                    ]
                },
                {
                    id: 3,
                    type: '转换工具'
                }
            ],
            status: false
        };
    },
    methods: {
        change() {
            console.log(11);
            this.status = !this.status;
        }
    }
};
</script>
<style scoped lang="scss"></style>
